<template>
  <div class="app-container answer3" style="display: flex; justify-content: center; padding-top: 37px">
    <el-form :model="queryParam" ref="queryForm" style="text-align: center;  width: 40%;" label-width="122px">
      <el-row>
        <el-form-item label="培训员工：">
          <el-select v-model="queryParam.userId" filterable placeholder="请选择（或输入）员工姓名" clearable @change="qryRelaDeparts">
            <el-option
              v-for="item in relaEmpList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对应部门：">
          <el-select v-model="queryParam.deptId"  placeholder="请选择（或输入）部门名称" :disabled="diableDept" clearable>
            <el-option
              v-for="item in relaDeptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-form style="margin-top: 24px; display: flex; justify-content: center;">
        <el-button type="primary" @click="submitForm" :disabled="disabledBtn">下载培训记录</el-button>
      </el-form> 
    </el-form>
  </div>
</template>

<script>

import { mapActions } from 'vuex'
import Pagination from '@/components/Pagination'
import userApi from '@/api/user'
import ansApi from '@/api/examPaperAnwser'

export default {
  components: { Pagination },
  data () {
    return {
      docEmpNm: '',
      docDeptNm: '',
      disabledBtn: true,
      diableDept: true,
      visible: false,
      isJump: false,
      taskTitleList: [],
      relaPaperList: [],
      relaDeptList: [],
      relaEmpList: [],
      queryParam: {
        userId: undefined,
        deptId: undefined
      },
      listLoading: false,
      tableData: [],
      total: 0
    }
  },
  watch: {
    'queryParam.userId': {
      handler(newName, oldName) {
        if (newName !== '' && newName !== undefined) {
          this.diableDept = false
        } else {
          this.diableDept = true
        }
      },
      immediate: true,
      deep: true
    },
    'queryParam.deptId': {
      handler(newName, oldName) {
        if (newName !== '' && newName !== undefined) {
          if (this.queryParam.userId !== '' && this.queryParam.userId !== undefined) {
            this.disabledBtn = false
          } else {
            this.disabledBtn = true
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.loadAll()
  },
  methods: {
    qryRelaDeparts() {
      this.queryParam.deptId = undefined
      ansApi.usersDeparts({ userId: this.queryParam.userId }).then(res => {
        this.relaDeptList = res.response
      })
    },
    loadAll() {
      userApi.userFilter().then(res => {
        this.relaEmpList = res.response
      })
    },
    submitForm () {
      this.relaEmpList.forEach(item => {
        if (item.id == this.queryParam.userId) {
          this.docEmpNm = item.name
        }
      })
      this.relaDeptList.forEach(item => {
        if (item.id == this.queryParam.deptId) {
          this.docDeptNm = item.name
        }
      })

      const params = {}
      params.userId = this.queryParam.userId
      params.deptId = this.queryParam.deptId
      params.docEmpNm = this.docEmpNm
      params.docDeptNm = this.docDeptNm
      ansApi.downloadWord(params).then(() => {
        // 
      })
    },
    ...mapActions('exam', { initSubject: 'initSubject' })
  },
}
</script>

<style rel="stylesheet/scss" lang='scss'>
.answer3 .el-form-item--medium .el-form-item__label {
  line-height: 36px;
  margin-left: 15px;
}


.answer3 .el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 0px;
  position: absolute;
  top: 100%;
  left: 0;
}

.answer3 .el-form-item--medium .el-form-item__content {
  line-height: 36px;
  text-align: left;
}

.answer3 .el-input--medium .el-input__inner {
  height: 36px;
  line-height: 36px;
  width: 286px;
}

.answer3 .el-form-item {
  margin-bottom: 12px;
}
</style>
